<template>
  <div class="access-process">
    <div class="secret-key">
      <span class="title">Secret Key</span>
      <el-input class="input" disabled></el-input>
      <div style="color: red; margin-top: 10px">*Secret Key is used to authenticate when calling the API. Please keep it safe</div>
    </div>
    <div class="secret-key-desc">
      <span class="title">描述</span>
      <el-input
        v-model="textareaValue"
        type="textarea"
        :maxlength="100"
        :autosize="{ minRows: 4, maxRows: 5}"
        class="input"
        @input="textareaInput"></el-input>
      <span class="text-length">{{textareaLength}}/100</span>
    </div>

    <div class="secret-key-api">
      <span class="title">请选择需要开通的接口</span>
      <el-checkbox-group
        class="checkbox"
        v-model="checkedApis">
        <el-checkbox v-for="api in apis" :label="api" :key="api">{{api}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="secret-key-manager">
      <span class="title">直线上级</span>
      <el-input class="input" placeholder="请输入ITCode"></el-input>
      <div style="color: red;margin-top: 10px">*审批邮件会发送给您的直接上级和CBI管理员</div>
    </div>
    <el-button type="primary" style="margin: 30px 180px">发送</el-button>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        textareaLength: 0,
        textareaValue: '',
        apis: ['客户管理属性', '客户基本属性', '客户行为标签', '商机', '销量', 'REV/GP/GP%', '订单', '维保'],
        checkedApis: []
      }
    },
    methods: {
      textareaInput() {
        this.textareaLength = this.textareaValue.length
      }
    }
  }
</script>

<style lang="scss" scoped>
  .access-process {
    background: #fff;
    margin: 20px 50px;
    padding: 20px 24px;
  }

  .title {
    display: inline-block;
    width: 100px;
    font-weight: bold;
    font-size: 14px;
    color: #333;
  }
  .input {
    /*margin-left: 30px;*/
    display: inline-block;
    width: 350px;
  }
  .secret-key {
    span {
      /*display: inline-block;*/
      /*font-weight: bold;*/
      /*font-size: 14px;*/
      /*color: #333;*/
    }
    .input {
    }
  }
  .secret-key-desc {
    position: relative;
    margin-top: 30px;
    .input {
      vertical-align: top;
    }
    .text-length {
      position: absolute;
      bottom: 0;
      left: 410px;
      color: #0090e9;
      font-size: 10px;
    }
  }
  .secret-key-manager {
    margin-top: 30px;
  }
  .secret-key-api {
    margin-top: 30px;
    .title {
      width: 100%;
      display: block;
    }
    .checkbox {
      margin-top: 20px;
    }
  }
</style>
